<template>
    <div class="bod">
        <div class="tx_header">
           <p><img src="../../../assets/personal/images/dp.png" style="width:17px;height:17px;margin-right:10px;">温馨提示:提现金额需≥100元，预计24小时内到账</p>
        </div>
        <div class="tx_main">
            <h4>提现金额</h4>
            
            <div class="amountout">
                <h3>￥</h3>
                <input type="text" placeholder="请输入提现金额" v-model="amount" >
            </div>
            <div class="amountleft">
                <p>可用余额{{userBalance |amountMin100(2)}}元,<i @click="all">全部提现</i></p>
            </div>
            <h4>提现到</h4>      
            <ul class="tixianway">
                <!-- <li class="vx"  @click="CLrewardStatus"> -->
                      <li class="vx">
                    <img src="../../../assets/personal/images/wx.png">
                    <strong>微信钱包</strong>   
                    <span :class="{active:1==rewardStatus}"></span>       
                </li>
                <!-- <li id="ThecardID" @click="show" v-if="CashList.length>0">
                    <img v-if="!bankCardId" src="../../../assets/personal/images/yinlian.png" >
                    <img v-else :src="require('../../../assets/bank/small_logo/'+bankAbbreviation+'.png')">
                    <strong>{{bankName}}{{bankId | capitalize4}}</strong>
                </li>
                <li id="ThecardID" @click="href_tx" v-else>
                    <img v-if="!bankCardId" src="../../../assets/personal/images/yinlian.png" >
                    <img v-else :src="require('../../../assets/bank/small_logo/'+bankAbbreviation+'.png')">
                    <strong>请绑定银行卡</strong>
                </li> -->
            </ul>  
        </div>
         
        <button class="sum" @click="withdrawal">点我提现</button>
        <div class="zzc" v-show="show_czz" @click="show_yz">
            <div class="list">
                <ul>
                    <li v-for="item in CashList" :key="item.id" @click="Theselected(item.bankId,item.id,item.bankAbbreviation,item.bankName)">
                        <img :src="require('../../../assets/bank/small_logo/'+item.bankAbbreviation+'.png')"> {{item.bankName }}({{item.bankId | capitalize4}})
                    </li>  
                    <li @click="newka()">
                        添加新银行卡
                    </li>              
                </ul>
            </div>
        </div>
        <div class="pwd" v-show="pwd_style">
            <div class="pwd_kuang" v-if="1==pwdType">
                <div class="pwdkuang_head">
                    <img @click="cloicepwd" src="../../../assets/personal/images/close-icon.png">请输入支付密码
                </div>
                <div class="pwdkuang_mind">
                    <h1>首象共享</h1>
                    <h2>￥{{amount}}</h2>
                </div>
                <div class="pwd_text">
                    <input ref="pwd" type="password" maxlength="6" v-model="passWord"  style="position: absolute;z-index: -1;left:-100%;opacity: 0"/>
                    <ul class="pwd-wrap" @click="focus">
                        <li><i v-if="msgLength > 0"></i></li>
                        <li><i v-if="msgLength > 1"></i></li>
                        <li><i v-if="msgLength > 2"></i></li>
                        <li><i v-if="msgLength > 3"></i></li>
                        <li><i v-if="msgLength > 4"></i></li>
                        <li><i v-if="msgLength > 5"></i></li> 
                    <div class="clearfix"></div>
                    </ul>
                   <div class="wjmm">
                       <router-link :to="{name:'accounts_security'}">忘记了密码?</router-link>
                  </div>
                </div>               
            </div>   
            <div  class="pwd_kuang1" v-else>
                 <p>您还未设置平台交易密码，请先设置</p>
                 <a href="/wap/gxt/accounts_security">设置平台交易密码</a>      
            </div>    
        </div>
    </div>
</template>
<style scoped>
@import "../../../assets/personal/css/Cashcard.css";
/*密码样式群*/
 .pwd_kuang1{
                width: 282px;
                height: 144px;
                background: #fff;
                margin: 0 auto;
                border-radius: 10px;
                margin-top: 200px;
            }
            .pwd_kuang1 p{
                line-height: 72px;
                text-align: center;
            }
            .pwd_kuang1 a{
                display: block;
                line-height: 40px;
                margin: 0 auto;
                width: 145px;
                border: 1px solid red;
                text-align: center;
                color: red;
            }
.wjmm {
    text-align: left;
    margin-left: 18px;
}
.wjmm a{
    line-height: 40px;
    color: blue;
}
.pwd_text{
    margin: 20px auto;
}
.clearfix{
    clear: both;
}
.pwdkuang_mind {
    border-bottom: 1px solid #e5e5e5;
}
.pwdkuang_mind h1{
font-size: 16px;
font-weight: bold;
line-height: 35px;
}
.pwdkuang_mind h2{
    line-height: 50PX;
}
.pwd_kuang{
    width: 241px;
  
    background: white;
    margin: 0 auto;
    margin-top: 80px;
    border-radius: 5px;
}
.pwd{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
}
.pwdkuang_head {
    text-align: left;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;
}
.pwdkuang_head img{
width: 15px;
height: 19px;
vertical-align: middle;
margin-right: 50px;
 
}
#payPwd .pwd-wrap{
    width: 90%;
    height: 44px;
    padding-bottom: 1px;
    margin: 0 auto;
    background: #fff;
    border:1px solid #ddd;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
  }
  .pwd-wrap{
      margin: 0 auto;
      border: 1px solid  #ddd;
      width: 200px;
  }
  .pwd-wrap li{
    list-style-type:none;
    text-align: center;
    line-height: 33px;
    height: 33px;
    width: 33px;
    float: left;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border-right:1px solid #ddd ;
  }
  .pwd-wrap li:last-child{
    border-right: 0;
  }
  .pwd-wrap li i{
    height: 10px;
    width: 10px;
    border-radius:50% ;
    background: #000;
    display: inline-block;
  }
</style>
<script>
export default {
    data () {
        return {
            banlanceType: this.$route.query.banlancetype,
            CashList:[],
            bankId:"",
            bankCardId:"",
            bankName:"银联卡",
            bankAbbreviation:"",
            show_czz:false,
            amount:'',
            userBalance:0,  
            rewardId:'',
            rewardStatus:1,//密码
            passWord:'',
            msgLength:0,
            pwd_style:false,
            pwdType:''
        }
    },
    mounted(){
      this.cashList();
      this.wallet();
      this.statepwd();
    },
    methods:{
        newka(){
         this.$router.push({name:'add_bank_card'})
        },
      CLrewardStatus:function(){
        this.rewardStatus= 1==this.rewardStatus ?2:1    //银行卡
      },
      cashList(){//卡
          this.$http.get(this.APIURL_PREFIX+"/api/wap/bankCardBag").then((response) => {
          this.CashList=response.data.data
          }).catch(function (err) {
            console.log(err)
          });
      },
       href_tx:function(){//绑定银行卡
           let vm=this;
           layer.confirm("您还未绑定银行卡，请前去绑定银行卡？", {
                btn : [ '确定', '取消' ]//按钮
            },function() {
                layer.close(layer.index);
                vm.$router.push({ name: 'add_bank_card'})
            }); 
       },
       Theselected:function(bankId,id,bankAbbreviation,name){//LOGO
        this.bankName=name
        this.bankId=bankId
        this.bankAbbreviation=bankAbbreviation;
        this.bankCardId=id
        this.rewardStatus=2
        this.show_czz=!this.show_czz
        console.log("卡"+bankId)
        console.log("i"+id)
        console.log("n"+bankAbbreviation)
      },
      show:function(){
        this.show_czz=!this.show_czz
      },
      show_yz:function(){
        this.show_czz=false
      },
      wallet(){//钱包
        if(0== this.banlanceType){
          this.$http.get(this.APIURL_PREFIX+"/api/wallet").then((response) => {
            this.userBalance=response.data.data.userBalance
            console.log(this.userBalance)
				}).catch(function(err){
					console.log(err)
				});
        }
        else{
            this.$http.get(this.APIURL_PREFIX+"/api/wap/company/wallet").then((response) => {
          this.userBalance=response.data.data[0].companyBalance
          console.log(this.userBalance)
				}).catch(function(err){
					console.log(err)
				});
        }
        
       },
       withdrawal:function(){//提现提交
           if(isNaN(this.amount)){return }
           if(this.amount*100>this.userBalance){
              layer.msg("您输出金额大于总额度");
               return;
           }
           if(this.amount<100){
               layer.msg("您的金额小于100元")
               return;
            }
            if(2== this.rewardStatus && !this.bankId){
               layer.msg("请选择银行卡");
                return;
            }
            this.pwd_style=true;             
       },
       all:function(){
         this.amount=parseFloat((this.userBalance/100).toFixed(2));
       },
       cloicepwd:function(){
         this.pwd_style=false;     
       },
       focus(){
          this.$refs.pwd.focus();
      },
       statepwd(){
          this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/sysPwd').then((response) => {
			 if(response.data.msg=="该用户以设置交易密码"){
                this.pwdType=1;
             }else{
                this.pwdType=2;
             }
	      }).catch(function(err){
	     	console.log(err)
		  })
        }
    },
    watch:{
        amount:function(newVal,oldVal){
            if(isNaN(newVal)){this.amount= oldVal;return;}
            if(newVal.toString().indexOf(".")>0 && newVal.toString().split(".")[1].toString().length>2 ){
                this.amount= oldVal;return;
            }
            if(newVal*100> this.userBalance){
                this.amount = parseFloat((this.userBalance/100).toFixed(2)) ;
            }
        },
        passWord(curVal){
            if(/[^\d]/g.test(curVal)){
                this.passWord = this.passWord.replace(/[^\d]/g,'');
            }else{
                this.msgLength = curVal.length;
            }
            if(this.pwdType==1){
                if(this.msgLength>5){
                                this.$http.post(this.APIURL_PREFIX+"/api/wap/accounts/validatePwd",$.param({passWord:this.passWord})).then((response) => {
                                if("密码校验成功"==response.data.msg){
                                this.pwd_style=false;     
                                if( 1== this.rewardStatus  ){this.bankCardId=""}
                                    // this.$http.post(this.APIURL_PREFIX+"/api/accounts/reward",$.param({rewardType: this.banlanceType,rewardStatus:this.rewardStatus,amount:this.amount*100,bankCardId:this.bankCardId,bankId:this.bankId})).then((response) => {
                                        this.$http.post(this.APIURL_PREFIX+"/api/accounts/reward",$.param({rewardType: this.banlanceType,rewardStatus:1,amount:this.amount*100  })).then((response) => {
                                        if(0==response.data.code){
                                            layer.msg("提现申请成功")
                                            this.rewardId=response.data.data.rewardId;
                                            console.log(this.rewardId)
                                            this.$router.push({ name:'withdrawalstate',query:{rewardId:this.rewardId}})
                                        }else if(4==response.data.code){
                                            layer.msg(response.data.msg)
                                        }else{
                                            layer.msg("提现申请失败")
                                        }
                                    }).catch(function (err) {
                                        layer.msg("网络错误")
                                        console.log(err)                      
                                    });              
                                }else if("Plz login."==response.data.msg){
                                   layer.msg("网络连接错误"+response.data.msg)
                                }else{
                                    layer.msg("密码输入错误")
                                    this.msgLength=0;
                                    this.passWord=""
                                }
                                }).catch(function (err) {
                                    layer.msg("网络错误")
                                    console.log(err)
                                }); 
                            }
            }else{
                layer.msg("网络连接错误")
            }
            
            console.log(this.passWord)
        },
    }
}
</script>
